import * as ImagePicker from "expo-image-picker";
import { useLocalSearchParams, useRouter } from "expo-router";
import React, { useState } from "react";
import { Button, Image, StyleSheet, Text, TextInput, TouchableOpacity, View } from "react-native";

export default function StoreDetailScreen() {
  const router = useRouter();
  const params = useLocalSearchParams();

  const [form, setForm] = useState({
    id: params.id,
    name: Array.isArray(params.name) ? params.name[0] : params.name,
    location: Array.isArray(params.location) ? params.location[0] : params.location,
    manager: Array.isArray(params.manager) ? params.manager[0] : params.manager,
    contact: Array.isArray(params.contact) ? params.contact[0] : params.contact,
    image: Array.isArray(params.image) ? params.image[0] : params.image,
    revenue: params.revenue,
    orders: params.orders,
  });

  const pickImage = async () => {
    const result = await ImagePicker.launchImageLibraryAsync({
      mediaTypes: "images",
      quality: 0.8,
    });
    if (!result.canceled) {
      setForm({ ...form, image: result.assets[0].uri });
    }
  };

  const modifyInfoMethod = () => {
    router.push({pathname:'/pages/CreateStoreScreen'})
    // alert("修改已保存（此示例暂不持久化）");
    // router.back();
  };

  return (
    <View style={styles.container}>
      <TouchableOpacity onPress={pickImage}>
        <Image source={{ uri: form.image }} style={styles.image} />
      </TouchableOpacity>

      <Text style={styles.sectionTitle}>店铺信息</Text>
      <TextInput
        readOnly
        style={styles.input}
        value={form.name}
        onChangeText={(v) => setForm({ ...form, name: v })}
        placeholder="店铺名称"
      />
      <TextInput
        readOnly
        style={styles.input}
        value={form.location}
        onChangeText={(v) => setForm({ ...form, location: v })}
        placeholder="店铺位置"
      />
      <TextInput
        readOnly
        style={styles.input}
        value={form.manager}
        onChangeText={(v) => setForm({ ...form, manager: v })}
        placeholder="负责人"
      />
      <TextInput
        readOnly
        style={styles.input}
        value={form.contact}
        onChangeText={(v) => setForm({ ...form, contact: v })}
        placeholder="联系方式"
      />

      <View style={styles.statsBox}>
        <Text style={styles.statsTitle}>📈 今日营业情况</Text>
        <Text style={styles.statsText}>营业额：{form.revenue}</Text>
        <Text style={styles.statsText}>订单数：{form.orders}</Text>
      </View>

      <Button title="修改信息" onPress={modifyInfoMethod} color="#007AFF" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, backgroundColor: "#fff", padding: 20 },
  image: {
    width: "100%",
    height: 200,
    borderRadius: 16,
    marginBottom: 16,
  },
  sectionTitle: {
    fontSize: 18,
    fontWeight: "600",
    marginVertical: 10,
  },
  input: {
    borderWidth: 1,
    borderColor: "#ddd",
    borderRadius: 8,
    padding: 10,
    marginBottom: 10,
  },
  statsBox: {
    backgroundColor: "#F3F4F6",
    borderRadius: 12,
    padding: 12,
    marginVertical: 16,
  },
  statsTitle: {
    fontSize: 16,
    fontWeight: "600",
    marginBottom: 6,
  },
  statsText: {
    fontSize: 14,
    color: "#333",
  },
});